<script>
// 库存账单的产品明细
Vue.component('stock-record-product-details', {
    template: `
<el-dialog title="产品明细" :visible.sync="dialogShow" width="1200px" @close="closeModal" style="min-height: 300px;">
 <div class="recordListBox">
    <el-card class="box-card" style="cursor: initial;">
        <div class="recordTable">
        <template>
        <el-table :data="recordList" border stripe  style="cursor: initial;" show-summary     :summary-method="getSummaries">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="product_title" label="产品名称">
        <template slot-scope="scope">
        <p>{{ scope.row['product_title'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="product_spec" label="规格">
        <template slot-scope="scope">
        <p>{{ scope.row['product_spec'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="product_unit" label="单位">
        <template slot-scope="scope">
        <p>{{ scope.row['product_unit'] }}</p>
        </template>
        </el-table-column>
         <el-table-column prop="num" label="数量">
        <template slot-scope="scope">
        <p>{{ scope.row['num'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="cost_price" label="单价">
        <template slot-scope="scope">
        <p>{{ scope.row['cost_price'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="money" label="总金额" sortable>
        <template slot-scope="scope">
        <p>{{ scope.row['money'] }}</p>
        </template>
        </el-table-column>
        </el-table>
        </template>
        </div>
        </el-card>
    </div>
</el-dialog>
    `,
    props: ['dialog-show', 'record-list'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally() {
            return this.$store.state.currentTally
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        recordList: {
            handler (newVal) {
                this.recordList = newVal
            },
            deep:true,
            immediate: true
        }
    },
    data:function(){
        return {
            recordDialog:false,
            recordList:[],
        }
    },
    methods:{
        closeModal(){
            this.$emit('modalClose')
        },
        modalClose(){
            this.recordDialog = false
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总计';
                    return;
                }else if(index === 1 || index === 2 || index === 3 || index === 4 || index === 5) {
                    sums[index] = '-';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = 0;
                     values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            sums[index] = sums[index] + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = parseFloat(sums[index]).toFixed(2) ;
                } else {
                    sums[index] = '';
                }
            });
            return sums;
        },
    }
})
</script>
